<script setup lang="ts">
const color = useColorMode();

useHead({
  meta: [
    {
      id: 'theme-color',
      name: 'theme-color',
      content: () => (color.value === 'dark' ? '#222222' : '#ffffff'),
    },
  ],
});

function toggleDark($eve) {
  const x = $eve.clientX
  const y = $eve.clientY
  // 计算鼠标点击位置距离视窗的最大圆半径
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y),
  )
  document.documentElement.style.setProperty('--x', x + 'px')
  document.documentElement.style.setProperty('--y', y + 'px')
  document.documentElement.style.setProperty('--r', endRadius + 'px')
  // 判断浏览器是否支持document.startViewTransition
  if (document.startViewTransition) {
    // 如果支持就使用document.startViewTransition方法
    document.startViewTransition(() => {
      color.preference = color.value === 'dark' ? 'light' : 'dark';      
      // 这里的函数是切换主题的函数，调用changeBtn函数时进行传入
    })
  } else {
    color.preference = color.value === 'dark' ? 'light' : 'dark';  
    // 如果不支持，就使用最原始的方式，切换主题
}
}
</script>

<template>
  <button class="!outline-none" @click="toggleDark">
    <div icon-btn class="i-carbon-sun dark:i-carbon-moon" />
  </button>
</template>
